<template>
  <div id="app">
    <router-view/>
    <router-view name="MyFooter"></router-view>
  </div>
  <!-- 
    1.布局
    2.路由（<router-link>）和（views）组件一一对应
    3.在index.js的routes中进行配置
    4.找到想变化的位置，给他设置router-view
   -->
</template>
<script>
export default {
  
};
</script>
<style>
* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
html,
body,
#app {
  height: 100%;
}
html {
  font-size: 26.67vw;
  /* 
  1vw = 视口宽度（375px）的百分之一
  1vw = 3.75px
  1px = 1/3.75vw = 0.2667vw
  100px = 26.67vw

  1rem = 100px
  1rem = 根元素字体的大小
  */
}
body {
  font-size: 16px;
}
#app {
  display: flex;
  flex-direction: column;
}
#app .footer {
  height: 0.44rem;
  /* background-color: cadetblue; */
}
#app .footer ul {
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#app .footer ul .router-link-exact-active {
  color: darkred;
}
#app .footer ul li{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#app .footer ul li span{
  font-size: .2rem;
}
#app .bigbox {
  flex: 1;
  overflow: auto;
  background-color: white;
  display: flex;
  flex-direction: column;
}
#app .bigbox .header {
  height: 0.44rem;
  /* background-color: pink; */
}
#app .bigbox .main {
  flex: 1;
  overflow: auto;
  /* background-color: darkcyan; */
}
</style>